<script setup lang="ts">
import axios from 'axios';
import { onMounted, ref } from 'vue';
import dayjs from 'dayjs'; 

const tableData = ref([]);
const dialogVisible = ref(false);
const merchantDetail = ref(null);

onMounted(() => {
    axios.get('http://localhost:8080/admin/selectMerchantByIsExamine').then(res => {
        tableData.value = res.data.data;
    });
});

const handleClick = async (row) => {
    try {
        const response = await axios.get(`http://localhost:8080/admin/selectMerchantById?id=${row.id}`);
        merchantDetail.value = response.data.data[0];
        
        merchantDetail.value.isExamine = merchantDetail.value.isExamine || '0';
        dialogVisible.value = true;
        console.log("弹窗应该显示，数据:", merchantDetail.value);
    } catch (error) {
        console.error('获取商家详情失败:', error);
    }
};

const handleSave = async () => {
    try {
        const response = await axios.post(
            'http://localhost:8080/admin/updateMerchantIsExamine',
            {
                id: merchantDetail.value.id,
                isExamine: merchantDetail.value.isExamine,
                remark: merchantDetail.value.remark
            }
        );

        console.log("审核状态更新成功:", response.data);
        dialogVisible.value = false;
        const refreshRes = await axios.get('http://localhost:8080/admin/selectMerchantByIsExamine');
        tableData.value = refreshRes.data.data;
    } catch (error) {
        console.error("审核状态更新失败:", error);
    }
};

const formatDateTime = (dateString) => {
    if (!dateString) return '无';
    return dayjs(dateString).format('YYYY-MM-DD HH:mm:ss');
};
</script>

<template>
    <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="编号" width="225px" />
        <el-table-column prop="username" label="账户名" width="225px" />
        <el-table-column prop="merchantName" label="店铺名" width="225px" />
        <el-table-column prop="applyTime" label="提交时间" width="225px">
            <template #default="scope">
                {{ formatDateTime(scope.row.applyTime) }}
            </template>
        </el-table-column>
        <el-table-column prop="isExamine" label="审核状态" width="225px">
            <template #default="scope">
                <el-tag :type="scope.row.isExamine === '1' ? 'success' : scope.row.isExamine === '2' ? 'danger' : 'warning'">
                    {{ scope.row.isExamine === '1' ? '通过' : scope.row.isExamine === '2' ? '不通过' : '待审核' }}
                </el-tag>
            </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" min-width="225px">
            <template #default="scope">
                <el-button link type="primary" size="small" @click="handleClick(scope.row)">
                    详情
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    
    <el-dialog
        v-model="dialogVisible"
        title="商家详情"
        width="50%">
        <el-descriptions 
            v-if="merchantDetail" 
            :column="1" 
            border
            style="margin-top: 20px;">
            <el-descriptions-item label="编号">{{ merchantDetail.id }}</el-descriptions-item>
            <el-descriptions-item label="账户名">{{ merchantDetail.username }}</el-descriptions-item>
            <el-descriptions-item label="用户头像">
                <img 
                    :src="`http://localhost:9000/img/${merchantDetail.userTouxiang}`"
                    style="max-width: 100px; max-height: 100px;"
                    alt="用户头像">
            </el-descriptions-item>
            <el-descriptions-item label="手机号">{{ merchantDetail.phone }}</el-descriptions-item>
            <el-descriptions-item label="店铺名">{{ merchantDetail.merchantName }}</el-descriptions-item>
            <el-descriptions-item label="店铺地址">{{ merchantDetail.position }}</el-descriptions-item>
            <el-descriptions-item label="店铺头像">{{ merchantDetail.touxiang }}</el-descriptions-item>
            <el-descriptions-item label="店铺背景图">{{ merchantDetail.bg }}</el-descriptions-item>
            <el-descriptions-item label="店铺简介">{{ merchantDetail.merchantIntroduction }}</el-descriptions-item>
            <el-descriptions-item label="提交时间">{{ formatDateTime(merchantDetail.applyTime) }}</el-descriptions-item>
            <el-descriptions-item label="审核状态">
                <el-select v-model="merchantDetail.isExamine" placeholder="请选择审核状态">
                    <el-option label="待审核" value="0"></el-option>
                    <el-option label="通过" value="1"></el-option>
                    <el-option label="不通过" value="2"></el-option>
                </el-select>
            </el-descriptions-item>
            <el-descriptions-item label="审核不通过原因" v-if="merchantDetail.isExamine === '2'">
                <el-input v-model="merchantDetail.remark" placeholder="请输入审核不通过原因"></el-input>
            </el-descriptions-item>

        </el-descriptions>
        
        <template #footer>
            <el-button @click="dialogVisible = false">关闭</el-button>
            <el-button type="primary" @click="handleSave">保存</el-button>
        </template>
    </el-dialog>
</template>